<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .test{
      border: 1px solid red;
    }
  </style>
</head>
<body>
<!--
3.css引用方式:行间样式、内部样式、外部样式、导入外部样式。
    行间样式:直接在标签上书写样式
    内部样式:在文件的内部书写样式。
        <style>
            样式内容
        </style>

外部样式:(1)先创建一个CSS文件:(2)再用1ink标签引入这个文件。

以上四种CSS引用方式的区别:
    行间样式只作用于当前标签;而内部样式作用于当前文件;外部样式可以被多个HTML文件引用。
    在实际项目开发中，最好使用外部样式。
    外部样式分为1ink引入和import引入两种方式。这两种方式区别:
        1)1ink是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务;@import属于CSS范畴，只能加载CSS。
        2)1ink引用CSS时，在页面载入时同时加载;@import需要页面网页完全载入以后加载。
        3)1ink是XHTML标签，无兼容问题:@import是在CSS2.1提出的，低版本的浏览器不支持。
        4)1ink支持使用Javascript控制D0M去改变样式;而@import不支持。
-->


<!--行内样式-->
<div style="border:1px solid pink">
  行内样式
</div>

<!--内部样式-->
<div class="test">
  内部样式
</div>

<!--外部部样式-->
<div class="test1" >
  外部部样式
</div>

</body>
</html>